<template>
    <div>
         <h1>食谱列表</h1>
        标题:
        <input type="text" v-model="cx.name">
        分类:
          <select v-model="cx.Tid">
         <option value="0">请选择</option>
          <option v-for="d in Bind":value=d.tid>{{d.tName  }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" @click="Showbody">
        <input type="button" value="重置" @click="cz">
        <br>
        <a href="/AddFood">新增食谱</a>
<table class="table">
    <thead>
    <tr>
        <td>标题</td>
        <td>食品封面</td>
        <td>分类</td>
        <td>标签</td>
        <td>分享</td>
        <td>收藏</td>
        <td>更新人</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    </thead>
  <tbody v-for="d in showdata">
     <tr>
        <td>{{d.bitton  }}</td>
        <td> <img style="width: 60px; height: 60px;":src="axios.defaults.baseURL+d.img" alt=""></td>
        <td>{{d.tName  }}</td>
        <td>{{d.bting  }}</td>
        <td>{{d.share  }}</td>
        <td>{{d.boon  }}</td>
        <td>{{d.name  }}</td>
        <td>{{d.state==true?"已发布":"未发布"  }}</td>
        <td>操作</td>
    </tr>
  </tbody>

</table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted}from 'vue'
import { useRouter } from 'vue-router';

onMounted(()=>{
    BangType()
    Showbody()
})
//绑定数据
const Bind=ref([{
      "tid": 0,
       "tName": ""
}])


//重置
const cz=()=>{
  cx.value=ref({
    name:"",
    Tid:0
})
}


const BangType=()=>{
    axios.get("/api/TypeBll/GetFoodTypes").then(res=>{
        Bind.value=res.data
    })
}
const showdata=ref([{
      "id": 0,
    "bitton": "",
    "img": "",
    "tid": 0,
    "bting": "",
    "share": "",
    "boon": "",
    "name": "",
    "updatetime": "2025-07-14T15:39:10.8087472",
     "state": true,
    "tName": ""
}])

const cx=ref({
    name:"",
    Tid:0
})

const Showbody=()=>{
    axios.get("/api/Food/GetFood",{params:cx.value}).then(res=>{
        showdata.value=res.data
    })
}










</script>

<style scoped>

</style>